.wrapper {
  margin: 10px;
  background-image: linear-gradient(to right, #ed6ea0 0%, #ec8c69 100%);
  height: 500px;
  border-radius: 15px;
  position: relative;
  overflow: hidden;
}

.shapeWrapper {
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
  border-top-right-radius: 14px;
  border-top-left-radius: 14px;
  transition: transform 250ms ease, top 250ms ease, bottom 250ms ease;
}

.top {
  top: 0;
  transform: rotate(0deg);
}

.bottom {
  bottom: 0;
  transform: rotate(180deg);
}

.reverse {
  transform: scaleX(-1);

  &.bottom {
    transform: rotate(180deg) scaleX(-1);
  }
}
